<layout-top-menu data-table-extra="36">
  <div :class="[$store.state.appPrefix + '-p-exercise-index']" v-loading="isPageLoading">
    <div class="g-table-layout">
      <div class="g-table-main">    
        <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
          <div class="g-table-top-action__left">
            <div class="g-table-main-title">我的练习</div>
          </div>
          <div class="g-table-top-action__right">
            <el-select
              class="g-table-top-action__left--block g-table-top-action__left--row"
              v-model="filterForm.courseId"
              placeholder="所属课程"
              clearable
              @change="$courseChange">
              <el-option
                v-for="item in courseList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId">
              </el-option>
            </el-select>
            <el-select
              class="g-table-top-action__left--block g-table-top-action__left--row"
              v-model="filterForm.lessonId"
              placeholder="所属课时"
              clearable
              @change="$search">
              <el-option
                v-for="item in lessonList"
                :key="item.lessonId"
                :label="item.lessonName"
                :value="item.lessonId">
              </el-option>
            </el-select>
            <el-select
              class="g-table-top-action__left--block g-table-top-action__left--row"
              v-model="filterForm.exerciseType"
              placeholder="练习项目"
              clearable
              @change="$search">
              <el-option
                v-for="item in FUN_IDS_OPTIONS"
                :key="item.codeNum"
                :label="item.codeName"
                :value="item.codeNum">
              </el-option>
            </el-select>
            <el-select
              class="g-table-top-action__left--block g-table-top-action__left--row"
              v-model="filterForm.passingState"
              placeholder="及格状态"
              clearable
              @change="$search">
              <el-option
                v-for="item in PASSING_STATUS"
                :key="item.codeNum"
                :label="item.codeName"
                :value="item.codeNum">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
          <el-table-column
            label="序号"
            type="index">
          </el-table-column>
          <el-table-column
            prop="lessonName"
            label="课时名称"
            show-overflow-tooltip
            :min-width="120">
            <template slot-scope="scope">
              <div>{{scope.row.lessonName}}</div>
              <div class="deco-txt-color deco-txt-size">课程: {{scope.row.courseName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="exerciseTypeName"
            label="练习项目"
            show-overflow-tooltip
            :min-width="120">
            <template slot-scope="scope">
              <div>{{ EXERCISE_TYPE[scope.row.exerciseType]}}</div>
              <div class="deco-txt-size">第{{scope.row.exerciseNumber}}次</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="finishTime"
            label="练习时间"
            show-overflow-tooltip
            :min-width="120">
            <template slot-scope="scope">
              <div>{{ getTimeStr(scope.row.finishTime) }}</div>
              <div class="deco-txt-size">用时：{{formatTime(scope.row.useTime)}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="comprehensiveScore"
            label="练习得分"
            show-overflow-tooltip
            :min-width="120">
            <template slot-scope="scope">
              <span :class="{'is-red': scope.row.comprehensiveScore < 60}">{{scope.row.comprehensiveScore}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="passingState"
            label="及格状态"
            show-overflow-tooltip
            :min-width="120">
            <template slot-scope="scope">
              <span>{{PASSING_STATUS[scope.row.passingState].codeName || '-'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            :width="120"
            class-name="no-ellipsis">
            <template slot-scope="scope">
              <div class="btns">
                <el-button type="text" size="medium" @click="$handleReport(scope.row)">查看报告</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="g-table-bottom g-pagination"
          background
          :hide-on-single-page="true"
          :layout="PAGE_CONFIG.simpleLayout"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="pageNo"
          @current-change="$handlePageChange">
        </el-pagination>
    </div>
    </div>
  </div>
</layout-top-menu>
